<template>
    <div class="cxdingdan">
        <div class="ckDingdan-xianzhi">
        <el-row>
            <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left">
                    商品订单列表
                </div>
                <div style="float: right;">
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="returnPage"><i class="el-icon-arrow-left"></i>返回</el-button>
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" @click="shuaxin"><i class="el-icon-refresh-right"></i>刷新</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="dingdan-box2" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left;margin-left: 60px;color: #F04844">
                    <i class="el-icon-warning"></i>当前订单状态:{{orderStatus}}
                </div>
                <div style="float: right;" v-if="Show">
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="handleClick">修改收获人信息</el-button>
                    <el-dialog title="修改收获人信息" :visible.sync="dialogFormVisible" width="60%" center>
                        <div class="dialogDiv">
                        <el-form class="demo-form-inline" @submit.native.prevent :model="form" :rules="rules" ref="form">
                            <el-form-item label="收货人姓名" :label-width="formLabelWidth" style="width: 350px;margin-left: 150px" prop="name">
                                <el-input :placeholder="Dingdan.yuser" v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码" :label-width="formLabelWidth" style="width: 350px;margin-left: 150px" prop="phone">
                                <el-input :placeholder="Dingdan.phone" v-model="form.phone" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="邮政编码" :label-width="formLabelWidth" style="width: 350px;margin-left: 150px" prop="yyouzheng">
                                <el-input :placeholder="Dingdan.yyouzheng" v-model="form.yyouzheng" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="所在区域" :label-width="formLabelWidth" style="width: 500px;margin-left: 150px">
                                <el-select placeholder="省" class="select-dingdan" v-model="selectProvince" style="width: 100px;">
                                    <el-option
                                            v-for="item in provinces"
                                            size="small"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            @click.native="changeProvince()"
                                    >
                                    </el-option>
                                </el-select>
                                <el-select placeholder="市" class="select-dingdan"  v-model="selectCity" style="width: 100px;margin-left: 10px">
                                    <el-option
                                            v-for="item in cities"
                                            size="small"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            @click.native="changeCity"
                                    >
                                    </el-option>
                                </el-select>
                                <el-select placeholder="区" class="select-dingdan" v-model="selectArea" style="width: 100px;margin-left: 10px">
                                    <el-option
                                            v-for="item in area"
                                            size="small"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="详细地址" :label-width="formLabelWidth" style="width: 450px;margin-left: 150px" prop="xxdizhi">
                                <el-input type="textarea" v-model="form.xxdizhi"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer" style="margin-left: 300px">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updateXingxi('form')">确 定</el-button>
                        </div>
                        </div>
                    </el-dialog>
                    <el-button size="mini" style="background-color: #FFFFFF;margin: 0px 30px 0px 30px" class="small-button" @click="handleClickTwo">备注订单</el-button>
                    <el-dialog title="备注订单" :visible.sync="dialogFormVisibleTwo" width="60%" center>
                        <div class="dialogDiv">
                            <el-form class="demo-form-inline" @submit.native.prevent :model="form" :rules="rules" ref="form">
                        <el-form-item label="订单备注" :label-width="formLabelWidth" style="width: 450px;margin-left: 150px" prop="beizhu">
                            <el-input type="textarea" v-model="form.beizhu" :rows="4"></el-input>
                        </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer" style="margin-left: 300px">
                                <el-button @click="dialogFormVisibleTwo = false">取 消</el-button>
                                <el-button type="primary" @click="Beizhu('form')">确 定</el-button>
                            </div>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="margin: 50px 0px 20px 30px">
                <div>
                    <i class="el-icon-tickets" style="color: #666666;font-size: 20px">基本信息</i>
                </div>
            </el-col>
        </el-row>
            <el-row>
                <el-col :span="24" style="margin-left: 30px">
                    <el-descriptions direction="vertical" :column="6" border>
                        <el-descriptions-item label="订单编号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.orderNo}}</el-descriptions-item>
                        <el-descriptions-item label="发货单流水号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.orderLogisticsNumber}}</el-descriptions-item>
                        <el-descriptions-item label="用户账号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.account}}</el-descriptions-item>
                        <el-descriptions-item label="支付方式" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.orderPaymentChannel}}</el-descriptions-item>
                        <el-descriptions-item label="订单来源" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.orderSource}}</el-descriptions-item>
                        <el-descriptions-item label="订单类型" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.orderType}}</el-descriptions-item>
                        <el-descriptions-item label="配送方式" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.ypeisongfangshi}}</el-descriptions-item>
                        <el-descriptions-item label="物流单号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.orderLogisticsNumber}}</el-descriptions-item>
                        <el-descriptions-item label="自动确认收获时间" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">7天后</el-descriptions-item>
                        <el-descriptions-item label="活动信息" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">无</el-descriptions-item>
                        <el-descriptions-item :label="quxiao" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.yquxiao}}</el-descriptions-item>
                        <el-descriptions-item label=""></el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin: 50px 0px 20px 30px">
                    <div>
                        <i class="el-icon-tickets" style="color: #666666;font-size: 20px">收货人信息</i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin-left: 30px">
                    <el-descriptions direction="vertical" :column="4" border>
                        <el-descriptions-item label="收货人" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.yuser}}</el-descriptions-item>
                        <el-descriptions-item label="手机号码" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.phone}}</el-descriptions-item>
                        <el-descriptions-item label="邮政编码" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.yyouzheng}}</el-descriptions-item>
                        <el-descriptions-item label="收货地址" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.receivingAddress}}</el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin: 50px 0px 20px 30px">
                    <div>
                        <i class="el-icon-tickets" style="color: #666666;font-size: 20px">商品信息</i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin-left: 30px">
                    <el-descriptions direction="vertical" :column="7" border>
                        <el-descriptions-item label="商品图片" label-style="text-align:center;font:bold 16px 微软雅黑;" content-style="text-align:center;">
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="Dingdan.mainImage">
                            </el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="商品名称" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.productName}}</el-descriptions-item>
                        <el-descriptions-item label="价格" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.currentpriceProduct}}</el-descriptions-item>
                        <el-descriptions-item label="编号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.productCode}}</el-descriptions-item>
                        <el-descriptions-item label="数量" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.productCount}}</el-descriptions-item>
                        <el-descriptions-item label="类型" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.categroyId}}</el-descriptions-item>
                        <el-descriptions-item label="小计" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Dingdan.logisticsFee}}</el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin: 50px 0px 20px 30px">
                    <div>
                        <i class="el-icon-tickets" style="color: #666666;font-size: 20px">费用信息</i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="margin-left: 30px">
                    <el-descriptions direction="vertical" :column="4" border>
                        <el-descriptions-item label="商品合计" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">￥{{Dingdan.currentpriceProduct}}</el-descriptions-item>
                        <el-descriptions-item label="运费" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">￥{{Dingdan.freightAmount}}</el-descriptions-item>
                        <el-descriptions-item label="优惠券" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">-￥{{Dingdan.couponPrice}}</el-descriptions-item>
                        <el-descriptions-item label="订单总金额" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">￥{{Dingdan.logisticsFee}}</el-descriptions-item>
                        <el-descriptions-item label="应付款金额" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">￥{{Dingdan.logisticsFee}}</el-descriptions-item>
                        <el-descriptions-item label=""></el-descriptions-item>
                        <el-descriptions-item label=""></el-descriptions-item>
                        <el-descriptions-item label=""></el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import { regionData } from "../../../node_modules/element-china-area-data";
    export default{
        inject:['reload'],
        data(){
            return{
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                orderStatus:'',//判断当前订单状态
                Dingdan:'',//用来存储接收的数据值
                Show:'',//状态是未付款未发货的时候判断可以显示修改信息
                dialogFormVisible:false,//这个是用来控制打开对话
                dialogFormVisibleTwo:false,
                formLabelWidth:'150px',//打开对话框里的表单的长度
                quxiao:'',
                form:{
                    name:'',
                    phone:'',
                    yyouzheng:'',
                    xxdizhi:'',
                    beizhu:''
                },
                //省市区联动下拉框
                provinces: regionData,
                cities: [],
                area: [],
                selectProvince: "",
                selectCity: "",
                selectArea: "",
                //必填的各个选项
                rules: {
                    name: [
                        { required: true, message: '请输入要更改的收货人名称', trigger: 'blur' },
                        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入要更改的收货人手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur' }
                    ],
                    yyouzheng: [
                        { required: true, message: '请输入要更改的邮编号', trigger: 'blur' },
                        { min: 5, max: 5, message: '邮编格式不正确', trigger: 'blur' }
                    ],
                    xxdizhi: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' },
                    ],
                    beizhu: [
                        { required: true, message: '请输入备注内容', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{
            async ShopDingdan(){
                //获取订单编号相关联的一切数据
                console.log(this.$store.state.num)
                const {data:res} = await this.$http.post("/postGetShopDingdanChaxunAll",{
                    "orderId":this.$store.state.num
                })
                this.Dingdan = res;
                console.log(res)
                if (this.Dingdan.orderStatus == 2) {
                    this.orderStatus = "待付款"
                    this.Dingdan.orderLogisticsNumber = "未发货"
                    this.Show = true
                }else if(this.Dingdan.orderStatus == 4){
                    this.orderStatus = "待发货"
                    this.Dingdan.orderLogisticsNumber = "未发货"
                    this.Show = true
                }else if(this.Dingdan.orderStatus == 5){
                    this.orderStatus = "已发货"
                }else if(this.Dingdan.orderStatus == 6){
                    this.orderStatus = "已完成"
                }else if(this.Dingdan.orderStatus == 10){
                    this.orderStatus = "已取消"
                    this.quxiao = "取消原因"
                }
                if(this.Dingdan.orderPaymentChannel == 2){
                    this.Dingdan.orderPaymentChannel = "微信支付"
                }else {
                    this.Dingdan.orderPaymentChannel = "余额支付"
                }
                if(this.Dingdan.orderSource == 2){
                    this.Dingdan.orderSource = "小程序"
                }else {
                    this.Dingdan.orderSource = "app"
                }
                this.Dingdan.orderType = "商品"
                if(this.Dingdan.categroyId == 1){
                    this.Dingdan.categroyId = "书籍"
                }else {
                    this.Dingdan.categroyId = "服装"
                }
            },
            shuaxin(){
                //刷新页面的方法
                this.reload();
            },
            returnPage(){
                //此方法用来返回上一个页面
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/system/storageManagement" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            handleClick() {
                this.dialogFormVisible = true;
                this.form.name=''
                this.form.phone=''
                this.form.yyouzheng=''
                this.form.xxdizhi=''
            },
            handleClickTwo(){
                this.dialogFormVisibleTwo = true;
                this.form.beizhu = ''
            },
           async updateXingxi(form){
                var dizhi = this.selectProvince+","+this.selectCity+","+this.selectArea;
               this.$refs[form].validate(async (valid) => {
                   if (valid) {
                       const {data: res} = await this.$http.post("/UpdateShopOrder", {
                           "yuser":this.form.name,
                           "phone":this.form.phone,
                           "receivingAddress":this.form.xxdizhi,
                           "yyouzheng":this.form.yyouzheng,
                           "ydizhi":dizhi,
                           "orderId":this.Dingdan.orderId
                       })
                       if (res){
                           this.Dingdan.yuser = this.form.name;
                           this.Dingdan.phone = this.form.phone;
                           this.Dingdan.receivingAddress = this.form.xxdizhi;
                           this.Dingdan.yyouzheng = this.form.yyouzheng;
                           this.$message({
                               message: '修改成功！',
                               type: 'success'
                           });
                       }
                       this.dialogFormVisible = false
                   } else {
                       this.dialogFormVisible = true
                       return false;
                   }
               });
            },
            Beizhu(form){
                this.$refs[form].validate(async (valid) => {
                    if (valid) {
                        const {data: res} = await this.$http.post("/UpdateRemarks", {
                            "remarks":this.form.beizhu,
                            "orderId":this.Dingdan.orderId
                        })
                        if (res){
                            this.dialogFormVisibleTwo = false
                            this.$message({
                                message: '备注成功！',
                                type: 'success'
                            });
                        }
                    } else {
                        this.dialogFormVisibleTwo = true
                        return false;
                    }
                });
            },
            changeProvince() {
                this.cities = [];
                this.area = [];
                this.selectCity = "";
                this.selectArea = "";
                let cityItem = this.provinces.filter(
                    (item) => item.value === this.selectProvince
                );
                if (cityItem[0]) {
                    this.cities = cityItem[0].children;
                }
            },
            changeCity() {
                this.area = [];
                this.selectArea = "";
                let areaItem = this.cities.filter(
                    (item) => item.value === this.selectCity
                );
                if (areaItem[0]) {
                    this.area = areaItem[0].children;
                }
            },
        },
        mounted() {
            this.ShopDingdan();
        }
    }
</script>

<style scoped>
    *{
        margin:0px;
        pargin:0px;
    }
    .center{
        margin:0 auto;
    }
    ul li{
        list-style:none;
    }
    a{
        text-decoration:none;
    }
    .cxdingdan{
        height: 100%;
        width: 100%;
    }
    .dingdan-box1{
        color: #666666;
        line-height: 50px;
        height: 50px;
        background-color: #F3F3F3;
    }
    .dingdan-box2{
        line-height: 80px;
        height: 80px;
        color: #666666;
        background-color: #F3F3F3;
    }
    .ckDingdan-xianzhi{
        width: 1340px;
    }
    .dialogDiv{
        width: 790px;
        height: 60vh;
        overflow: scroll;
    }
</style>